<template>
  <div>
    <el-dialog
      v-model="props.visible"
      title=""
      width="80%"
      @close="handleCancel"
    >
      <el-button type="primary" v-print="print">打印</el-button>
      <div id="printBox" v-loading="loading">
        <div class="print-box" v-for="obj in dataList" :key="obj.produceId">
          <div class="title">
            <h2 class="title-left">
              山东经典印务生产通知单(封面)
              <span
                v-if="obj.urgentDate"
                style="margin-left: 50px; font-size: 30px"
                >加急</span
              >
              <span v-else style="margin-left: 50px">正常</span>
            </h2>
            <div style="width: 300px">
              生产单编号:
              <span style="font-size: 18px">{{
                obj.produceNo.slice(0, -4)
              }}</span
              ><span style="font-size: 24px">{{
                obj.produceNo.slice(-4)
              }}</span>
            </div>
          </div>
          <div class="item">
            <div class="item-row">
              开单日期:
              {{ obj.submitDate ? obj.submitDate.split("T")[0] : "" }}
              <span></span>
            </div>
            <div class="item-row">
              交货日期:{{
                obj.deliverDate ? obj.deliverDate.split("T")[0] : ""
              }}
              <span></span>
            </div>
            <div class="item-row" style="width: 300px">
              出版编号: {{ obj.pubNo }} <span> </span>
            </div>
          </div>
          <div style="font-weight: 700; font-size: large">
            备注:
            <span>{{ obj.remark }}</span>
          </div>
          <h4>产品管理</h4>
          <div>
            <table border="2" cellspacing="0" cellpadding="6">
              <tr>
                <th class="text" style="width: 300px">书刊名称</th>
                <!-- <th class="text" style="width: 100px">产品名称</th> -->
                <th class="text" style="width: 100px">清样编号</th>
                <th class="text" style="width: 100px">文件号</th>
                <th class="text" style="width: 100px">书号</th>
                <th class="text" style="width: 100px">定价</th>
                <th class="text" style="width: 100px">品种</th>
                <th class="text" style="width: 100px">印色</th>
                <th class="text" style="width: 100px">颜色</th>
                <th class="text" style="width: 100px">订单数量</th>
                <th class="text" style="width: 100px">覆膜</th>
                <th class="text" style="width: 100px">喷码</th>
                <th class="text" style="width: 100px">联版数量</th>
                <th class="text" style="width: 100px">内文承印厂</th>
              </tr>
              <tr v-for="item in obj.produceProductList" :key="item.productId">
                <td class="text">
                  {{ item.bookName }}
                </td>

                <td class="text">
                  {{ item.sampleNo }}
                </td>
                <td class="text">
                  {{ item.fileNo }}
                </td>
                <td class="text">
                  {{ item.bookNo }}
                </td>
                <td class="text">
                  {{ item.fixPrice }}
                </td>
                <td class="text">
                  {{ item.breedType }}
                  <!-- <dict-tag
                                        :options="ems_order_make_up"
                                        :value="item.composition"
                                    /> -->
                </td>
                <td class="text">
                  <dict-tag
                    :options="ems_order_print_color"
                    :value="item.printColor"
                  />
                </td>
                <td class="text">
                  <dict-tag :options="ems_produce_color" :value="item.color" />
                </td>
                <td class="text">
                  {{ item.produceCount }}
                </td>
                <td class="text">
                  <dict-tag
                    :options="ems_produce_cover_film"
                    :value="item.coverFilm"
                  />
                </td>
                <td class="text">
                  <dict-tag
                    :options="ems_produce_marking"
                    :value="item.marking"
                  />
                </td>
                <td class="text">
                  {{ item.lianbanCount }}
                </td>
                <td class="text">
                  {{ item.textPrinter }}
                </td>
              </tr>
            </table>
          </div>
          <h4>纸张管理</h4>
          <div>
            <table border="2" cellspacing="0" cellpadding="6">
              <tr>
                <th class="text" style="width: 150px">纸张类型</th>
                <th class="text" style="width: 200px">纸型</th>
                <!-- <th class="text" style="width: 100px;">品种</th> -->
                <th class="text" style="width: 150px">定量</th>
                <th class="text" style="width: 150px">规格</th>
                <th class="text" style="width: 150px">幅度(mm)</th>
                <!-- <th class="text" style="width: 100px">宽度(mm)</th> -->
                <th class="text" style="width: 150px">单位</th>
                <th class="text" style="width: 150px">库存数量</th>
                <th class="text" style="width: 150px">用纸令数</th>
                <th class="text" style="width: 150px">裁切尺寸</th>
              </tr>
              <tr v-for="item in obj.producePaperList" :key="item.paperId">
                <td class="text">
                  <dict-tag :options="mes_paper_material" :value="item.type" />
                </td>
                <td class="text">
                  <dict-tag :options="mes_paper_type" :value="item.paperType" />
                </td>
                <td class="text">
                  {{ item.weight }}
                </td>
                <td class="text">
                  <dict-tag
                    :options="mes_paper_specs"
                    :value="item.specifications"
                  />
                </td>
                <td class="text">
                  {{ item.length == 0 ? "" : item.length }}
                </td>
                <!-- <td class="text">
                                {{ item.width }}
                            </td> -->
                <td class="text">
                  <dict-tag :options="mes_paper_unit" :value="item.unit" />
                </td>
                <td class="text">
                  {{ item.amount }}
                </td>
                <td class="text">
                  {{ item.reamAmount }}
                </td>
                <td class="text">
                  {{ item.size }}
                </td>
              </tr>
            </table>
          </div>
          <h4>印刷管理</h4>
          <div>
            <table border="2" cellspacing="0" cellpadding="6">
              <tr>
                <th class="text" style="width: 100px">部件</th>
                <th class="text" style="width: 100px">纸型</th>
                <th class="text" style="width: 80px">定量</th>
                <th class="text" style="width: 80px">印数</th>
                <th class="text" style="width: 80px">用纸令数</th>
                <th class="text" style="width: 80px">损耗比例</th>
                <th class="text" style="width: 80px">损耗令数</th>
                <th class="text" style="width: 100px">用纸总令数</th>
                <th class="text" style="width: 80px">另行加放</th>
                <th class="text" style="width: 80px">印色</th>
                <th class="text" style="width: 100px">印色方式</th>
                <th class="text" style="width: 100px">版材数量</th>
                <th class="text" style="width: 100px">版材尺寸</th>
                <th class="text" style="width: 100px">活页烤版</th>
                <th class="text" style="min-width: 150px">纸张规格</th>
                <th class="text" style="min-width: 100px">装订机台</th>
              </tr>
              <tr v-for="item in obj.producePrintList" :key="item.printId">
                <td class="text">
                  {{ item.composition }}
                </td>
                <td class="text">
                  <dict-tag :options="mes_paper_type" :value="item.paperType" />
                </td>
                <td class="text">
                  {{ item.weight }}
                </td>
                <td class="text">
                  {{ item.printAmount }}
                </td>
                <td class="text">
                  {{ item.reamAmount }}
                </td>

                <td class="text">
                  {{ item.lossCoefficient }}
                </td>
                <td class="text">
                  {{ item.lossReam }}
                </td>
                <td class="text">
                  {{ item.totalReamAmount }}
                </td>
                <td class="text">
                  {{ item.lxjf }}
                </td>
                <td class="text">
                  <dict-tag
                    :options="ems_order_print_color"
                    :value="item.printColour"
                  />
                </td>
                <td class="text">
                  <dict-tag
                    :options="ems_produce_print_colour_type"
                    :value="item.printColourType"
                  />
                </td>
                <td class="text">
                  {{ item.sheetAmount }}
                </td>

                <td class="text">
                  <dict-tag
                    :options="ems_machine_info_size"
                    :value="item.sheetSize"
                  />
                </td>
                <td class="text">
                  <dict-tag :options="ems_produce_hykb" :value="item.hykb" />
                </td>
                <td class="text">
                  <span font-size="5px;">{{ item.paperName }}</span>
                  <!-- <dict-tag
                                        :options="mes_paper_specs"
                                        :value="item.paperSpecifications"
                                    /> -->
                </td>
                <td class="text">
                  {{ item.bindingMachine?.split("/")[1] }}
                </td>
              </tr>
            </table>
          </div>
          <h4>覆膜管理</h4>
          <div>
            <table border="2" cellspacing="0" cellpadding="6">
              <tr>
                <th class="text" style="width: 240px">部件</th>
                <th class="text" style="width: 240px">覆膜</th>
                <th class="text" style="width: 240px">定量</th>
                <th class="text" style="width: 240px">纸型</th>
                <th class="text" style="width: 240px">规格型号</th>
                <th class="text" style="width: 240px">令数</th>
              </tr>
              <tr
                v-for="item in obj.produceCoveringList"
                :key="item.coveringId"
              >
                <td class="text">
                  <!-- <dict-tag :options="ems_order_make_up" :value="item.composition" /> -->
                  {{ item.composition }}
                </td>
                <td class="text">
                  <dict-tag
                    :options="ems_produce_cover_film"
                    :value="item.covering"
                  />
                </td>
                <td class="text">
                  {{ item.weight }}
                </td>
                <td class="text">
                  <dict-tag :options="mes_paper_type" :value="item.paperType" />
                </td>
                <td class="text">
                  <dict-tag
                    :options="mes_paper_specs"
                    :value="item.specification"
                  />
                </td>
                <td class="text">
                  {{ item.ream }}
                </td>
              </tr>
            </table>
          </div>

          <div class="item" style="margin-top: 20px">
            <div></div>
            <div></div>
            <div></div>
            <div class="item-row">
              制单人:
              {{ obj.createBy }}
              <span></span>
            </div>
            <div class="item-row">
              制单日期:{{ obj.createTime ? obj.createTime.split("T")[0] : "" }}
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const emit = defineEmits(["cancel"]);
import { getProduceById } from "@/api/production/cover";
const {
  ems_produce_new_past,
  ems_machine_info_size,
  ems_produce_hykb,
  mes_paper_material,
  mes_paper_specs,
  ems_produce_package_require,
  mes_paper_unit,
  ems_produce_print_colour_type,
  ems_produce_color,
  ems_produce_is_new,
  mes_paper_type,
  ems_workshop_subject_type,
  ems_order_make_up,
  ems_order_breed_type,
  ems_order_print_color,
  ems_produce_paper_size,
  ems_produce_cover_film,
  ems_produce_marking,
  ems_machine_info_waste_rate,
} = proxy.useDict(
  "ems_machine_info_waste_rate",
  "ems_produce_new_past",
  "mes_paper_unit",
  "ems_produce_package_require",
  "mes_paper_specs",
  "mes_paper_material",
  "ems_produce_hykb",
  "ems_machine_info_size",
  "ems_produce_color",
  "ems_produce_print_colour_type",
  "ems_produce_is_new",
  "ems_produce_paper_size",
  "ems_produce_cover_film",
  "ems_produce_marking",
  "mes_paper_type",
  "ems_order_print_color",
  "ems_order_make_up",
  "ems_workshop_subject_type",
  "ems_order_breed_type"
);
const route = useRoute();
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  id: {
    type: [String, Number],
    default: "",
  },
  printList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
//这里是打印的配置项
const print = ref({
  id: "printBox", //这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: "配置页眉标题", // 打印配置页上方的标题
  fitToPage: true,
  // extarCss: `@page { size: auto;  margin: 20mm; } @media print { body { zoom: 0.6; } }`,
  style: `@page { size: auto;  margin: 20mm; zoom: 66%; }`, // 设置缩放比例为100%
  extraHead: "", // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: "山东经典印务生产通知单(封面)", // 打印预览的标题
  previewPrintBtnLabel: "预览结束，开始打印", // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20002, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() {
    console.log("正在加载预览窗口！");
  }, // 预览窗口打开之前的callback
  previewOpenCallback() {
    console.log("已经加载完预览窗口，预览打开了！");
  }, // 预览窗口打开时的callback
  beforeOpenCallback() {
    emit("cancel");
    console.log("开始打印之前！");
  }, // 开始打印之前的callback
  openCallback() {
    console.log("执行打印了！");
  }, // 调用打印时的callback
  closeCallback() {
    console.log("关闭了打印工具！");
  }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() {
    console.log("点击v-print绑定的按钮了！");
  },
});
const data = reactive({
  produceProductList: [], // 产品
  producePaperList: [], // 纸张
  producePrintList: [], // 印刷
  produceCoveringList: [], // 覆膜
  producePieceList: [],
  form: {},
});
const dataList = ref([]);
const loading = ref(true);
const {
  form,
  produceProductList,
  producePaperList,
  producePrintList,
  produceCoveringList,
  producePieceList,
} = toRefs(data);

// watch(
//     () => props.id,
//     val => {
//         if (val) {
//             getProduceById({ pid: props.id }).then(res => {
//                 Object.assign(form.value, { ...res.data })
//                 produceProductList.value = res.data.produceProductList
//                 producePrintList.value = res.data.producePrintList
//                 producePaperList.value = res.data.producePaperList
//                 produceCoveringList.value = res.data.produceCoveringList
//                 producePieceList.value = res.data.producePieceList
//             })
//         }
//     }
// )
watch(
  () => props.printList,
  async (val) => {
    if (val.length > 0) {
      try {
        loading.value = true;
        const promises = val.map((item) =>
          getProduceById({ pid: item.produceId })
        );
        const responses = await Promise.all(promises);
        loading.value = false;
        dataList.value = [];
        responses.forEach((response) => {
          dataList.value.push(response.data);
        });
      } catch (error) {
        loading.value = false;
        console.error("Error fetching produce:", error);
      }
    }
  }
);

const handleCancel = () => {
  dataList.value = [];
  emit("cancel");
};
</script>

<style lang="scss" scoped>
.printBox {
  font-size: 9px !important;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .title-left {
    text-align: center;
    flex: 1;
  }
}

.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

table,
th,
td {
  border: 1px solid #ccc;
}

th,
td {
  padding: 8px;
  text-align: center;
}

th {
  background-color: #f2f2f2;
}
@media print {
  table {
    width: 100% !important;
    max-width: 100% !important;
  }
  /* 假设您的内容主体在一个类为 `.content` 的元素内 */
  .content {
    /* 防止内容内部断开到下一页 */
    page-break-inside: avoid;

    /* 在每个奇数页末尾强制分页 */
    &:nth-of-type(odd) {
      page-break-after: always;
    }
  }
}
.print-box {
  page-break-before: always;
}
</style>
